import React, { Component } from 'react'
import { nanoid } from "nanoid";
import { connect } from 'react-redux';
import {createAddPersonAction} from '../../redux/actions/person';

class Person extends Component {
    add = () => {
        const name = this.nameNode.value;
        const age = this.ageNode.value;
        const personObj = {id: nanoid(), name,age}
        console.log(personObj);
        this.props.addPerson(personObj);

    }
  render() {
    return (
      <>
      <h1>上方总和为:{this.props.zonghe}</h1>
      <input ref={c => this.nameNode = c} type="text" placeholder="输入名字"></input>
      <input ref={c=> this.ageNode = c} type="text" placeholder="输入年龄"></input>
      <button onClick={this.add}>添加</button>
      <ul>
          {
              this.props.yiduiren.map((p) => {
                  return <li key={p.id}>{p.name}---{p.age}</li>
              })
          }
      </ul>
      </>
    )
  }
}

export default  connect(
    state => ({yiduiren: state.rens, zonghe: state.he}), //映射状态
    {
        addPerson: createAddPersonAction, //映射操作状态的方法
    }

)(Person)